<script setup lang="ts">
import { PropType, computed } from 'vue'
import type { TableData } from '@/api/table/types'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<TableData>>,
    default: () => null
  },
  detailSchema: {
    type: Array as PropType<Array<DescriptionsSchema>>,
    default: () => []
  }
})

const formattedData = computed(() => {
  if (!props.currentRow) return {}
  return props.detailSchema.reduce(
    (acc, schema) => {
      const value = props.currentRow[schema.field]
      acc[schema.field] = schema.formatter ? schema.formatter(value, props.currentRow) : value
      return acc
    },
    {} as Record<string, any>
  )
})
</script>

<template>
  <Descriptions :schema="detailSchema" :data="formattedData" />
</template>
